<template>
  <div class="book-mid-container">
    <div class="book-mid-main-body">
      <div class="book-mid-navbar">
        <el-menu :default-active="activeIndex" mode="horizontal" class="el-menu-demo" background-color=" var(--bPageBgColor)">
          <!-- Logo -->


          <el-menu-item index="1" @click="activeIndex = '1'" class="menu-item">
            介绍
          </el-menu-item>
          <el-menu-item index="2" @click="activeIndex = '2'" class="menu-item">
            目录
          </el-menu-item>
          <el-menu-item index="3" @click="activeIndex = '3'" class="menu-item">
            点评
          </el-menu-item>
          <el-menu-item index="4" @click="activeIndex = '4'" class="menu-item">
            评论
          </el-menu-item>
        </el-menu>
      </div>
      <div class="book-mid-data">
        <div class="introduce" v-if="activeIndex === '1'">

          文章简介
        </div>
        <div class="catalog" v-else-if="activeIndex === '2'">
          <catalogue :book-id="id"></catalogue>
        </div>
        <div class="comment" v-else-if="activeIndex === '3'">
          点评
          <!-- Form -->
          <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

          <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="活动名称" :label-width="200">
                <el-input v-model=" form.name " autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="活动区域" :label-width="200">
                <el-select v-model=" form.region " placeholder="请选择活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>

        </div>
        <div class="comment" v-else-if=" activeIndex === '4' ">
          <comment :comments=" commentData " :my_id=" 1 "></comment>
          <chapterCommentInput @submit="console.log(1122);"></chapterCommentInput>

        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">


//  import * as CommentData from '@/components/test/mockdata';

import chapterCommentInput from './bookCommentInput.vue';
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import catalogue from '../../components/catalogue.vue';

const route = useRoute();
const id = ref(route.params.id);

let dialogFormVisible = false;

let form = {
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
}

const commentData = ref();
onMounted(() => {
  axios({
    method: 'get',
    url: "/api/comments/book/" + id.value,

  }).then((res) => {
    console.log("axios:", res);

    const data = res.data;
    commentData.value = data;


  });
});

const submitComment = () => {
  ElMessage.success('评论成功');
}

const activeIndex = ref('1')

</script>

<style scoped>
.book-mid-container {

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100%;
  background-color:  var(--bPageBgColor);
  margin: auto;

}

.book-mid-main-body {
  width: 840px;
  height: 400px;
  background-color:  var(--bReadContentBgColor);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.book-mid-navbar {
  width: 100%;
  height: 40px;
  background-color:  var(--bReadContentBgColor);
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 10px;
}

.book-mid-data {
  margin-top: 20px;
  min-height: 200px;
  text-align: left;
}
</style>